<template>
    <section>
        <view class="content">
            <view class="list-view-tick">
                <view class="item">
                    <div class="circle circle-left"></div>
                    <div class="circle circle-right"></div>
                    <view class="top-title">
                        ume影城（重庆三峡广场店）
                        <span>></span>
                    </view>
                    <div class="movie-name">
                        罗小黑战绩
                        <span>特权0元</span>
                    </div>
                    <p class="movie-message">
                        <span>2019年11月11日 10:25</span>(2D国语)
                    </p>
                    <p class="hall-num">1号厅 | E排9号 E排10号</p>
                    <div class="serial-number--container">
                        <p>序列号：1234 55</p>
                        <p>验证码：1234 55</p>
                    </div>
                    <div id="qrcode"></div>
                    <p class="out-notice">出票后，入场请通过人脸识别匝道仅限本人使用</p>
                    <div class="circle circle-order-left"></div>
                    <div class="circle circle-order-right"></div>
                    <div class="order-details--container">
                        <p>
                            <span>订单号</span>
                            122435454545454545
                        </p>
                        <p>
                            <span>订单金额</span>
                            ¥42.00
                        </p>
                        <p>
                            <span>权益优惠</span>
                            -¥20.00
                        </p>
                        <p>
                            <span>优惠券</span>
                            -¥20.00
                        </p>
                        <p>
                            已优惠 ¥49.00&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            实付款
                            <em>¥49.00</em>
                        </p>
                    </div>
                </view>
            </view>
        </view>
        <footerMenu />
    </section>
</template>
<script>
import footerMenu from "../components/footer";
// import QRCode from "qrcodejs2";

export default {
    components: {
        footerMenu
        // uniIcons
    },
    data() {
        return {};
    },
    onLoad() {},
    mounted() {
        // this.getBaecode();
    },
    methods: {
        /**
         * 生成二维码
         */
        getBaecode() {
            let that = this;
            let qrcode = new QRCode("qrcode", {
                width: 110,
                height: 110,
                text: "http://www.baidu.com" // 二维码内容
                // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                // background: '#f0f',   // 背景色
                // foreground: '#ff0'    // 前景色
            });
        }
    }
};
</script>

<style  lang="scss" scoped>
.content {
    overflow-y: scroll;
    height: px2vw(600);
}
.index-header {
    text-align: center;
    height: px2vw(245);
    width: 100%;
    background: #333;
    position: relative;
    border-bottom-left-radius: px2vw(15);
    border-bottom-right-radius: px2vw(15);
}
.list-view-tick {
    width: px2vw(355);
    margin: px2vw(20) auto auto auto;
    &:last-child {
        margin-bottom: px2vw(80);
    }
    .item {
        width: px2vw(355);
        // height: px2vw(210);
        margin: 0 auto;
        position: relative;
        border-radius: px2vw(10);
        background-color: #fff;
        box-shadow: 0 px2vw(4) px2vw(30) #d8d3d3;
        &:after {
            display: block;
            content: "clear";
            clear: both;
            height: 0;
            width: 100%;
            overflow: hidden;
        }
        .top-title {
            height: px2vw(44);
            line-height: px2vw(44);
            font-size: px2vw($fz14);
            padding-left: px2vw(10);
            // background-color: #fffbeb;
            border-top-left-radius: px2vw(10);
            border-top-right-radius: px2vw(10);
            border-bottom: px2vw(1) dashed #ddd;
            span {
                padding-right: px2vw(20);
                display: block;
                float: right;
            }
        }
        .movie-name {
            height: px2vw(44);
            line-height: px2vw(44);
            // font-size: px2vw($fz14);
            padding-left: px2vw(10);
            margin-top: px2vw(10);
            span {
                height: px2vw(30);
                font-size: px2vw($fz14);
                margin-right: px2vw(20);
                padding: 0 px2vw(5);
                margin-top: px2vw(5);
                line-height: px2vw(30);
                background-color: #f24244;
                text-align: center;
                display: block;
                float: right;
                border-radius: px2vw(5);
                color: #fff;
            }
        }
        .movie-message {
            font-size: px2vw($fz14);
            padding-left: px2vw(10);
            span {
                padding-right: px2vw(5);
                color: #ef6f5f;
            }
        }
        .hall-num {
            font-size: px2vw($fz14);
            padding-left: px2vw(10);
            padding-top: px2vw(5);
        }
        .serial-number--container {
            width: px2vw(200);
            height: px2vw(75);
            background-color: $bgc-base;
            margin: px2vw(20) auto;
            border-radius: px2vw(5);
            p {
                font-size: px2vw($fz16);
                text-align: center;
                &:nth-child(1) {
                    padding-top: px2vw(15);
                }
            }
        }
        #qrcode {
            width: 110px;
            // width: px2vw(200);
            // height: px2vw(75);
            // background-color: $bgc-base;
            margin: px2vw(30) auto px2vw(20) auto;
            // border-radius: px2vw(5);
            // img {
            //     width: 100%;
            //     height: 100%;
            // }
        }
        .out-notice {
            font-size: px2vw($fz14);
            text-align: center;
            color: $c-light;
            margin-bottom: px2vw(30);
        }
        .order-details--container {
            width: px2vw(355);
            border-top-left-radius: px2vw(10);
            border-top-right-radius: px2vw(10);
            border-top: px2vw(1) dashed #ddd;
            p {
                line-height: px2vw(44);
                &:not(:last-child) {
                    border-bottom: px2vw(1) solid #ddd;
                }
                margin: 0 px2vw(10);
                font-size: px2vw($fz14);
                text-align: right;
                span {
                    display: block;
                    float: left;
                    color: $c-light;
                    text-align: left;
                }
                em {
                    font-weight: bold;
                    padding-left: px2vw(5);
                    font-style: normal;
                    color: #f24244;
                }
            }
        }
        .circle {
            width: px2vw(20);
            height: px2vw(10);
            position: absolute;
            margin: auto;
            background-color: #f5f5f5;
            border-radius: 50px 50px 0 0;
        }
        .circle-left {
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg); /* Opera */
            left: -1.33333vw;
            top: px2vw(40);
        }
        .circle-right {
            -ms-transform: rotate(-90deg); /* IE 9 */
            -moz-transform: rotate(-90deg); /* Firefox */
            -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
            -o-transform: rotate(-90deg); /* Opera */
            right: -1.33333vw;
            top: px2vw(40);
        }
        .circle-order-left {
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg); /* Opera */
            left: -1.33333vw;
            top: px2vw(443);
        }
        .circle-order-right {
            -ms-transform: rotate(-90deg); /* IE 9 */
            -moz-transform: rotate(-90deg); /* Firefox */
            -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
            -o-transform: rotate(-90deg); /* Opera */
            right: -1.33333vw;
            top: px2vw(443);
        }
    }
}
</style>
